<script setup>
import {router} from "../../router/router.js";
import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import {doGet, doPost, doPut} from "../../util/request.js";
import {showMessage} from "../../util/message.js";
//路由路径对象
const route = useRoute()
//交易记录对象
const tran = ref({})
//表单提交对象
const tranFormRef = ref()
//提交表单
const submit = (fromRef) => {
  if (!fromRef) return

  fromRef.validate((valid)=>{
    if (valid){
      //获取路径参数
      let id = route.params.id;
      //准备参数
      let params = {
        id: id,
        tranNo: tran.value.tranNo,
        customerId: tran.value.customerId,
        money: tran.value.money,
        expectedDate: tran.value.expectedDate,
        nextContactTime: tran.value.nextContactTime,
      }
      console.log('提交表单',params)
      if(id){
        //修改
        doPut('/api/tran',params).then(resp => {
          if (resp.data.code === 200) {
            showMessage("修改成功","success")

            //跳转到用户列表页面
            router.back()
          }else {
            showMessage("修改失败"+resp.data.msg,"error")
          }
        })
      }else {

        //新增
        doPost('/api/tran',params).then(resp => {
          if (resp.data.code === 200){
            showMessage("新增成功","success")
            router.push('/index/tran')
          }else {
            showMessage("新增失败"+resp.data.msg,"error")
          }
        })
      }
    }
  })
}
//重置表单
const resetForm = (formRef) => {
  if (!formRef) return
  formRef.resetFields()
}

//查询交易客户名字
const tranList = ref([])
const loadTranList= ()=>{
  doGet('/api/customer/list',{}).then(resp => {
    tranList.value = resp.data.data
    console.log(resp.data.data)
  })
}
//查询数据回显
const loadData = ()=>{
  //获取路径参数
  let id = route.params.id;
  if (id){
    doGet('/api/tran/'+id).then(resp => {
      if (resp.data.code === 200){
        tran.value = resp.data.data
      }else {
        showMessage("数据加载失败，请稍后重试"+resp.data.msg,"error")
      }
    })
  }
}

onMounted(()=>{
  loadTranList()
  loadData()
})
</script>

<template>
  <h1 v-if="tran.id">修改交易记录</h1>
  <h1 v-else>添加交易记录</h1>

  <el-form
      ref="tranFormRef"
      style="max-width: 600px;"
      :model="tran"
      label-width="auto"

      class="demo-ruleForm">

    <el-form-item label="交易流水号" prop="tranNo">
      <el-input v-model="tran.tranNo" />
    </el-form-item>


    <el-form-item label="客户名字" prop="state">
      <el-select
          v-model="tran.customerId"
          placeholder="请选择"
          style="width: 240px">
        <el-option
            v-for="trans in tranList"
            :key="trans.id"
            :label="trans.cname"
            :value="trans.id"
        />
      </el-select>
    </el-form-item>

    <el-form-item label="交易金额" prop="money">
      <el-input v-model="tran.money" />
    </el-form-item>
    <el-form-item label="交易时间" prop="expectedDate">
      <el-date-picker
          v-model="tran.expectedDate"
          type="datetime"
          value-format="YYYY-MM-DD HH:mm:ss"
          date-format="YYYY-MM-DD HH:mm:ss"
      />
    </el-form-item>

    <el-form-item label="下次联系时间" prop="nextContactTime">
      <el-date-picker
          v-model="tran.nextContactTime"
          type="datetime"
          value-format="YYYY-MM-DD HH:mm:ss"
          date-format="YYYY-MM-DD HH:mm:ss"
      />
    </el-form-item>
    <el-form-item label=" ">
      <div style="margin-left: 150px">
        <el-button type="primary" @click="submit(tranFormRef)">提交</el-button>
        <el-button @click="resetForm(tranFormRef)">重置</el-button>
        <el-button @click="router.back()">返回</el-button>
      </div>
    </el-form-item>

  </el-form>
</template>

<style scoped>

</style>